<template>
	<view>
		<view class="pore" style="z-index: 999;">
			<u-navbar title="趣玩黄石" bgColor="transparent" @leftClick="leftBack" :titleStyle="{'color':'transparent'}">
			</u-navbar>
		</view>
		<view class="uni-margin-wrap pore">
			<image :src="api_host + ban.imageUrl" mode="widthFix" class="width100"></image>
			<view class="ban-logo">
				<view class="c343 f46">{{ban.title}}</view>
				<view class="c343 f32">{{ban.synopsis}}</view>
			</view>
		</view>
		<view class="ml30 mr30 content-box pore">
			<view class="bgFff p10 radius50 flex-jus" @click="nologinJump('/pages/search/index?type=wan')">
				<u-search placeholder="输入你要找的旅游景点" disabled v-model="keyword" clearabled bgColor="#fff"
					:showAction="false"></u-search>
				<view>
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}"
						shape="circle">搜索</u-button>
				</view>
			</view>
			<view class="mt20">
				<scroll-view scroll-x="true" class="scroll-X">
					<view class="menu-item" :class="{'active':nav_id == item.id}" v-for="(item,index) in menuList"
						:key="index" @click="menu_click(item)">
						<!-- nologinJump('/foodpages/food/list?id='+item.id+'&name='+item.title) -->
						<view class="menu-item-box">
							<view class="flex">
								<image :src="api_host + item.icon" mode="" style="width: 60rpx;height: 60rpx;"></image>
								<view class="c343 f28 bold">{{item.title}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<u-gap height="20"></u-gap>
			<view v-if="listData.length > 0">
				<waterfall-flow ref="water" :dataArray="listData"></waterfall-flow>
			</view>
		</view>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import waterfallFlow from '@/components/waterfall-flow/index.vue'
	import {
		getWanhome,
		getWanlist
	} from '@/common/api_wan.js'
	import {
		getBanners
	} from '@/common/api_user.js'
	export default {
		components: {
			waterfallFlow
		},
		name: '',
		data() {
			return {
				scrollTop: 0,
				ban: {},
				keyword: '',
				nav_id: '',
				menuList: [],
				listData: [],
				pageNum: 1,
				lastPage: false,
			}
		},
		onLoad() {
			this.getBanners()
			this.getWanhome()
		},
		onShow() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			console.log("到底了");
			if (this.lastPage) {
				this.pageNum += 1
				this.getWanlist()
			}
		},
		methods: {
			async getBanners() {
				uni.showLoading({
					mask: true
				})
				const res = await getBanners({
					affiliation: '5'
				})
				if (res.code == 200) {
					this.ban = res.data[0]
				}
				uni.hideLoading()
			},
			async getWanhome() {
				uni.showLoading({
					mask: true
				})
				const res = await getWanhome()
				if (res.code == 200) {
					const {
						tourTypes,
						userVlogs
					} = res.data
					this.menuList = tourTypes
					this.nav_id = this.menuList[0].id
					this.getWanlist()
					//this.listData = userVlogs
				}
				uni.hideLoading()
			},
			async receiveCoupon(item) {
				uni.showLoading({
					mask: true
				})
				const res = await receiveCoupon({
					id: item.id
				})
				if (res.code == 200) {
					this.show_yhq_success = true
					setTimeout(() => {
						this.show_yhq_success = false
					}, 1000)
				}
				uni.hideLoading()
			},
			async getWanlist() {
				uni.showLoading({
					mask: true
				})
				const res = await getWanlist({
					id: this.nav_id,
					pageSize: 5,
					pageNum: this.pageNum
				})
				if (res.code == 200) {
					// this.listData = res.data
					this.lastPage = res.lastPage
					this.listData = this.listData.concat(res.data)
					let tempObject = {}
					this.listData = this.listData.reduce((item, next) => {
						// item为没有重复id的数组，next为当前对象
						tempObject[next.id] ? '' : (tempObject[next.id] = true && item.push(next));
						return item;
					}, [])
				}
				uni.hideLoading()
			},
			menu_click(item) {
				this.listData = []
				this.pageNum = 1
				this.nav_id = item.id
				this.getWanlist()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1FFED;
	}

	.ban-logo {
		position: absolute;
		top: 35%;
		left: 50rpx;
	}

	.content-box {
		margin-top: -80rpx;
	}

	.box_shadow {
		box-shadow: 0 10rpx 16rpx -10rpx #c1bfb4;
	}

	.scroll-X {
		white-space: nowrap;
	}

	.menu-item {
		padding: 20rpx 0 10rpx 0rpx;
		margin-right: 40rpx;
		display: inline-block;
	}

	.active {
		border-bottom: 8rpx solid #FFDE6D;
	}

	.menu-item:last-child {
		margin-right: 0;
	}
</style>